/**
 * 表格组件
 */
// 引入MobX相关
const { storeBindingsBehavior } = require('../../../miniprogram_npm/mobx-miniprogram-bindings/index');
const { observable } = require('../../../miniprogram_npm/mobx-miniprogram/index');

// 创建本地store
const tableComponentStore = observable({
	// 排序状态
	sorting: {
		field: '', // 当前排序字段
		order: 'asc' // 升序/降序
	},
	
	// 过滤状态
	filterState: {
		field: '',
		value: null
	},
	
	// 分页信息
	pageInfo: {
		current: 1,
		pageSize: 10,
		total: 0,
		totalPages: 0
	},
	
	// 设置排序状态
	setSorting(sort) {
		if (!sort || !sort.field) return;
		
		this.sorting = {
			field: sort.field,
			order: sort.order || 'asc'
		};
	},
	
	// 设置过滤状态
	setFilterState(filter) {
		if (!filter || !filter.field) return;
		
		this.filterState = {
			field: filter.field,
			value: filter.value
		};
		
		// 重置到第一页
		this.pageInfo.current = 1;
	},
	
	// 初始化分页信息
	resetPage(params) {
		const { total, pageSize } = params || {};
		
		this.pageInfo = {
			current: 1,
			pageSize: pageSize || 10,
			total: total || 0,
			totalPages: Math.ceil((total || 0) / (pageSize || 10))
		};
	},
	
	// 下一页
	nextPage() {
		if (this.pageInfo.current < this.pageInfo.totalPages) {
			this.pageInfo.current += 1;
		}
	},
	
	// 上一页
	prevPage() {
		if (this.pageInfo.current > 1) {
			this.pageInfo.current -= 1;
		}
	}
});

Component({
	/**
	 * 外部样式类
	 */
	externalClasses: ['header-row-class-name', 'row-class-name', 'cell-class-name'],

	/**
	 * 添加MobX绑定行为
	 */
	behaviors: [storeBindingsBehavior],

	/**
	 * MobX Store绑定
	 */
	storeBindings: {
		store: tableComponentStore,
		fields: ['sorting', 'filterState', 'pageInfo'],
		actions: ['setSorting', 'setFilterState', 'nextPage', 'prevPage', 'resetPage']
	},

	/**
	 * 组件样式隔离
	 */
	options: {
		styleIsolation: "isolated",
		multipleSlots: true // 支持多个slot
	},

	/**
	 * 组件的属性列表
	 */
	properties: {
		data: {
			type: Array,
			value: []
		},
		headers: {
			type: Array,
			value: []
		},
		// table的高度, 溢出可滚动
		height: {
			type: String,
			value: 'auto'
		},
		width: {
			type: Number || String,
			value: '100%'
		},
		// 单元格的宽度
		tdWidth: {
			type: Number,
			value: 35
		},
		// 固定表头 thead达到Header的位置时就应该被fixed了
		offsetTop: {
			type: Number,
			value: 150
		},
		// 是否带有纵向边框
		stripe: {
			type: Boolean,
			value: false
		},
		// 是否带有纵向边框
		border: {
			type: Boolean,
			value: false
		},
		msg: {
			type: String,
			value: '暂无数据~'
		},
		// 是否开启排序功能
		sortable: {
			type: Boolean,
			value: false
		},
		// 是否支持分页
		paginated: {
			type: Boolean,
			value: false
		}
	},

	/**
	 * 组件的初始数据
	 */
	data: {
		scrolWidth: '20%'
	},

	lifetimes: {
		attached: function () {
		},
		ready: function () {
			// 如果支持分页，初始化页面信息
			if (this.data.paginated) {
				this.resetPage({
					total: this.data.data.length,
					pageSize: 10
				});
			}
		},
		detached: function () {
			// 在组件实例被从页面节点树移除时执行
			// 清理MobX绑定
			if (this.storeBindings) {
				this.storeBindings.destroyStoreBindings();
			}
		},
	},

	/**
	 * 组件的方法列表
	 */
	methods: {
		// 点击表头排序
		onSortClick: function(e) {
			if (!this.data.sortable) return;
			
			const { field, index } = e.currentTarget.dataset;
			// 调用MobX action进行排序
			this.setSorting({
				field,
				order: this.data.sorting.field === field && this.data.sorting.order === 'asc' ? 'desc' : 'asc'
			});
			
			// 触发排序事件
			this.triggerEvent('sort', {
				field, 
				order: this.data.sorting.order
			});
		},
		
		// 过滤数据
		onFilter: function(e) {
			const { field, value } = e.detail;
			this.setFilterState({
				field,
				value
			});
			
			// 触发过滤事件
			this.triggerEvent('filter', {
				field,
				value
			});
		},
		
		// 分页功能
		onNextPage: function() {
			if (!this.data.paginated) return;
			
			this.nextPage();
			this.triggerEvent('page-change', {
				current: this.data.pageInfo.current,
				pageSize: this.data.pageInfo.pageSize
			});
		},
		
		onPrevPage: function() {
			if (!this.data.paginated) return;
			
			this.prevPage();
			this.triggerEvent('page-change', {
				current: this.data.pageInfo.current,
				pageSize: this.data.pageInfo.pageSize
			});
		}
	}
})